import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:freemusic/components/Common.dart';
import 'package:freemusic/model/AbstractSong.dart';
import 'package:freemusic/page/songsheet/SongSheetList.dart';
import 'package:freemusic/services/SongServices.dart';
import 'package:freemusic/stores/PlayerStores.dart';
import 'package:freemusic/utils/Util.dart';

class PlayListBottomSheet extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return PlayListBottomSheetState();
  }
}

class PlayListBottomSheetState extends State<PlayListBottomSheet>
    with StoreWatcherMixin<PlayListBottomSheet> , AutomaticKeepAliveClientMixin {
  PlayerStore _playerStore;

  @override
  void initState() {
    super.initState();
    _playerStore = listenToStore(playerStoreToken);
  }

  void deleteAllOnTap(BuildContext context) {
    showCommonDialog(
      context,
      content: "确定清空所有歌曲？",
      onConfirm: () {
        SongServices.getInstace().clearStorePlayList();
        Navigator.pop(context);
      },
    );
  }

  void handleAddToGedan() {
    AbstractSong song = _playerStore.current;
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SongSheetListPage(waitAddSong: song,),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    List<AbstractSong> songList = _playerStore.songList;
    AbstractSong song = _playerStore.current;
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 60.0,
            padding: EdgeInsets.only(left: 8.0, right: 8.0),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Color.fromRGBO(220, 220, 220, 0.4),
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "正在播放 (${songList.length} 首)",
                  style: TextStyle(fontSize: 16),
                ),
                Container(
                  padding: EdgeInsets.only(right: 8.0),
                  width: 68,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      GestureDetector(
                        child: Image.asset("images/add2.png", width: 20.0),
                        onTap: this.handleAddToGedan,
                      ),
                      GestureDetector(
                        onTap: () {
                          this.deleteAllOnTap(context);
                        },
                        child: Image.asset("images/delete.png", width: 22.0),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemBuilder: (context, index) {
                AbstractSong current = songList[index];
                return _SongItem(
                  item: current,
                  isCurrent: current.hash == song.hash,
                );
              },
              itemCount: songList.length,
            ),
          ),
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class _SongItem extends StatelessWidget {
  final AbstractSong item;
  final bool isCurrent;

  const _SongItem({Key key, this.item, this.isCurrent = false})
      : super(key: key);

  _changeSong() {
    SongServices.getInstace().playSong(item);
  }

  _deleteSong() {
    SongServices _songServices = SongServices.getInstace();
    _songServices.deleteStorePlaySong(item);
  }

  @override
  Widget build(BuildContext context) {
    Color themeColor = Util.themeColor;

    return InkWell(
      onTap: () {
        _changeSong();
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Color.fromRGBO(220, 220, 220, 0.4),
            ),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              height: 60.0,
              child: Row(
                children: <Widget>[
                  isCurrent
                      ? Container(
                          padding: EdgeInsets.only(left: 8.0),
                          child: Image.asset(
                            "images/laba.png",
                            width: 18.0,
                            height: 18.0,
                          ),
                        )
                      : Container(),
                  Container(
                    margin: EdgeInsets.only(left: 10, right: 10),
                    child: LimitedBox(
                      maxWidth: 120,
                      child: Text(
                        item.songName, //item.songName
                        textWidthBasis: TextWidthBasis.longestLine,
                        style: TextStyle(
                          color: isCurrent
                              ? themeColor
                              : Color.fromRGBO(0, 0, 0, 1),
                          fontSize: 16.0,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                  LimitedBox(
                    maxWidth: 120,
                    child: Text(
                      item.singerName,
                      style: TextStyle(
                        color: isCurrent
                            ? themeColor
                            : Color.fromRGBO(23, 23, 23, 0.5),
                        fontSize: 14.0,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  Container(
                      padding: EdgeInsets.only(left: 8),
                      child: Image.asset(
                        "images/${item.platform}.png",
                        width: 20,
                        height: 20,
                      )),
                ],
              ),
            ),
            Container(
                child: IconButton(
              icon:
                  Image.asset("images/shanchu.png", width: 18.0, height: 18.0),
              onPressed: () {
                _deleteSong();
              },
            ))
          ],
        ),
      ),
    );
  }
}
